<template>
	<view class="container">
		<!-- 头部 -->
		<view class="head-box">
			<image :src="Config_ysy.cosurl + headImg" style="width: 100%;position: absolute;z-index: -1;" mode="widthFix"></image>
			<view class="inp-box">
				<view class="loca">{{ location }}</view>
				<view class="inp" @click="bindSE()">
					<image class="search" src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/barset/%E6%94%BE%E5%A4%A7%E9%95%9C.png" mode=""></image>
					<input type="text" class="chaxun" value="" placeholder="点击输入搜索内容" />
				</view>
				<view class="kefu" @click="toKefu"><image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/barset/%E5%92%A8%E8%AF%A2.png" mode=""></image></view>
			</view>
			<view class="fun_box">
				<view class="fun_item" @click="sfk">
					<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/new_saas/index/6.png" mode=""></image>
					<view class="title">收付款</view>
				</view>
				<view class="fun_item" @getCode="getCode">
					<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/new_saas/index/9.png" mode=""></image>
					<view class="title">扫一扫</view>
				</view>
				<view class="fun_item" @click="zb">
					<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/new_saas/index/7.png" mode=""></image>
					<view class="title">直播</view>
				</view>
				<view class="fun_item" @click="hy">
					<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/new_saas/index/8.png" mode=""></image>
					<view class="title">行业</view>
				</view>
			</view>
		</view>
		<!-- 菜单栏 -->
		<view class="menu_box">
			<view class="menu_item" v-for="(item, index) in menuList" :key="index" @click="bindInfos(item.id, item.title)">
				<image class="menu_img" :src="Config_ysy.img_url + item.image" mode=""></image>
				<text class="menu_txt">{{ item.title }}</text>
			</view>
		</view>
		<!-- 轮播图 -->
		<view class="banner">
			<swiper class="swipers" autoplay interval="3000" duration="1000" circular>
				<swiper-item v-for="(item, index) in swiper" :key="index"><image :src="Config_ysy.cosurl + item.image" mode="scaleToFill"></image></swiper-item>
			</swiper>
		</view>
		<!-- 明星产品 -->
		<view class="star_box">
			<view class="star_head">
				<view class="star_left">明星产品</view>
				<view class="star_right" @click="bindBt">进入商城></view>
			</view>
			<view class="star_list">
				<view class="star_item" v-for="(item, index) in goodsList" :key="index" @click="bindGoodsShop(item.id)">
					<image class="star_img" :src="item.image" mode=""></image>
					<view class="title">{{ item.title }}</view>
					<view class="price">
						<text class="yh">优惠</text>
						<text class="jg">￥{{ item.sku_price[0].price }}</text>
						<text class="yuan">元</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 热门推荐 -->
		<view class="shift_box">
			<view class="shift_head">
				<view class="shift_left">热门推荐</view>
				<view class="shift_right">为您精选</view>
			</view>
			<view class="shift_dh">
				<view class="dh_left" :class="currentIndex == index ? 'dh_hover' : ''" v-for="(item, index) in dhList" :key="index" @click="bindTab(index)">
					<text style="color:#484747;font-size:40upx;font-weight:bold;display: block;">{{ item.name }}</text>
					<text style="color:#A4131D;font-size:18upx;font-weight:bold;display: block;">优惠等你来</text>
				</view>
			</view>
			<view class="shop_kong" style="margin-top: 20upx;display: flex;justify-content: center;align-items: center;font-size: 24upx;color: #ccc;" v-if="shopList.length==0">
			   暂无数据	
			</view>
			<view class="shift_list" v-else>
				<view class="shop_item" v-for="(item, index) in shopList" :key="index">
					<view class="shop_left" v-if="item.tag == '服务站'&&item.image.substr(1,7)=='uploads'"><image class="imgs" :src="Config_ysy.oldUrl + item.logo" mode=""></image></view>
					<view class="shop_left" v-else-if="item.tag == '服务站'&&item.image.substr(1,3)=='img'"><image class="imgs" :src="Config_ysy.cosurl + item.logo" mode=""></image></view>
					<view class="shop_left" v-if="item.tag == ''&&item.image.substr(1,7)=='uploads'"><image class="imgs" :src="Config_ysy.oldUrl + item.logo" mode=""></image></view>
					<view class="shop_left" v-else-if="item.tag == ''&&item.image.substr(1,3)=='img'"><image class="imgs" :src="Config_ysy.cosurl + item.logo" mode=""></image></view>
					 <view class="shop_right">
						<view class="shop_title">
							<view class="title_left">{{ item.name }}</view>
							<view class="title_right">距您：{{ item.distance }}km</view>
						</view>
						<view class="shop_sub">{{ item.subTitle }}</view>
						<view class="tuijie">
							<sx-rate class="sx-rate" disabled :default-color="color.default" :max="maxNum" :active-color="color.active" :value="Number(item.star)" fontSize="34upx" /><text style="font-size: 38upx;color: #F40C0C ;">{{item.star}}分</text>
						</view>
						<view class="shop_del">
							<view class="del_left">
								<view class="shop_num" v-if="item.tag == '服务站'" @click="bindGoodsList(item)">全部商品({{item.count_goods}})</view>
								<view class="shop_num"  v-if="item.tag == ''" @click="bindGoodsList(item)">全部商品({{item.count_goods}})</view>
							</view>
							<view class="shop_jl" v-if="item.tag == '服务站'" @click="bindGoodsShopss(item)">查看店铺</view>
						</view>
					</view>
				</view>
				
			</view>
		</view>
		<!-- 最新资讯 -->
		<view class="info_box">
			<view class="info_head">最新资讯</view>
			<view class="info_item" v-for="(item, index) in infolist" :key="index" @click="bindInfo(item.id)">
				<view class="info_left">
					<view class="left_title">{{ item.title }}</view>
					<view class="left_sub">{{ item.subtitle }}</view>
				</view>
				<view class="info_right"><image :src="Config_ysy.cosurl + item.a_image" mode=""></image></view>
			</view>
		</view>
		<view class="bottom-tab">
			<view class="bottom-tab-item-sider" @click="changeTab(index, item.url)" v-for="(item, index) in tabListParent" :key="index">
				<image v-if="index == 0" class="first-img" :src="item.select_icon"></image>
				<image v-if="index != 0" class="first-img" :src="item.icon"></image>
				<text :class="index == 0 ? 'text-position text-on' : 'text-position'">{{ item.name }}</text>
			</view>
		</view>
	</view>
</template>

<script>
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import SxRate from '@/components/sx-rate';
export default {
	components:{
		uniLoadMore,
		SxRate,
	},
	data() {
		return {
			headImg:'',
			tabListParent: [],
			menuList:[],
			swiper:[],
			goodsList:[],
			dhList:[
			    	{name:'商家'},
			    	{name:'服务站'},
			],
			shopList:[
				{tag:'服务站',star:"4.7",name:'123',distance:'9',subTitle:8888,count_goods:89},
				{tag:'',star:"4",name:'123',distance:'9',subTitle:8888,count_goods:89},
				{tag:'',star:"4",name:'123',distance:'9',subTitle:8888,count_goods:89},
				{tag:'',star:"4",name:'123',distance:'9',subTitle:8888,count_goods:89},
			],
			infolist:[],
			curTab: 0,
			token:"65843b17-f22b-438b-ad25-be07d64464fb",
			shop_id: 147,
			location:'定位中..',
			currentIndex:0,
			text: '页面上要显示的内容：这是一个自定义的扫码界面！',
			type:'scan-listener',
			maxNum: 5,
			color: {
				default: '#ccc',
				active: '#F40C0C'
			},
			result:''//获取到的二维码内容，根据自己需求处理结果
		};
	},
	onReady() {
		// #ifdef APP-PLUS
		// #endif
	},
	onLoad(option) {
		this.token=option.token
		this.shop_id=option.shop_id
		// #ifdef APP-PLUS
		this.$eventHub.$on(this.type, function(data) {
			console.log(data);
			this.text = data;
		});
		// #endif
		this.getNavData()
		this.getTabData();
		this.address_x()
		this.getBannerData()
		this.getStarData()
		this.getLbData()
		this.getShopData()
		this.getInfo()
	},
    onBackPress() {
    	// #ifdef APP-PLUS
    	plus.screen.lockOrientation('portrait-primary')
    	// #endif
    },
    onPullDownRefresh:function(){
           this.getBannerData()
			this.getInfo()
			this.getLbData()
			this.getNavData()
			this.getStarData()
			this.getShopData()
    },
	mounted() {

	},
	methods: {
		bindSE(){
			uni.navigateTo({
				url:'../search/search?shop_id='+this.shop_id+'&token='+this.token
			})
		},
		address_x(){
			var address = uni.getStorageSync('address')
			let params = {
				'longitude':address.longitude,
				'latitude':address.latitude,
				token:this.token
			};
			var url = '/api/quickpay/order/location'
			this.Unfold_data.upload_data(params, 'POST', url, res => {
				console.log('res',res);
				if(res.statusCode==200&&res.data.code==1){
					//删除逗号
					if(res.data.data.cityCode!=0){
						this.location = res.data.data.addressComponent.city;
						this.code1 = res.data.data.cityCode
					}else{
						this.Unfold_data.showWindow('请开启定位功能')
						this.location = '定位失败！'
					}
					console.log(this.location);
				}else{
					//显示错误信息
					// this.Unfold_data.showWindow(res.data.msg);
				}
			});
		},

      sfk(){
		 this.Unfold_data.showWindow('敬请期待');
	  },
	  zb(){
		  this.Unfold_data.showWindow('敬请期待');
	  },
	  hy(){
		  this.Unfold_data.showWindow('敬请期待');
	  },
	 getCode(val){
	   uni.navigateTo({
		url:'../sconde/sconde'
	   })
		console.log(val)
	},
		getNavData(){
			var url = '/api/article/article/navigation';
			let params = {
				token:this.token,
				shop_id:this.shop_id
			};
			this.Unfold_data.yh_data(params, 'POST', url, res => {
				if (res.data.code == 1) {
					uni.stopPullDownRefresh()
					this.menuList = res.data.data;
				} else {
					this.Unfold_data.showWindow(res.data.msg);
				}
			});
		},
		getBannerData(){
			var url = '/api/article/article/background';
			let params = {
				shop_id:this.shop_id
			};
			this.Unfold_data.yh_data(params, 'POST', url, res => {
				if (res.data.code == 1) {
					uni.stopPullDownRefresh()
					this.headImg = res.data.data.image;
				} else {
					this.Unfold_data.showWindow(res.data.msg);
				}
			});
		},
		getLbData(){
			var url = '/api/article/article/banner';
			let params = {
				shop_id:this.shop_id
			};
			this.Unfold_data.yh_data(params, 'POST', url, res => {
				if (res.data.code == 1) {
					uni.stopPullDownRefresh()
					this.swiper = res.data.data;
				} else {
					this.Unfold_data.showWindow(res.data.msg);
				}
			});
		},
		getShopData(){
			uni.showLoading({
				title:'加载中'
			})
			let url="/api/shop/service/lists";
			var address = uni.getStorageSync('address')
			let params = {
				'longitude':address.longitude,
				'latitude':address.latitude,
				token:this.token,
				shop_id:this.shop_id,
				name:'商家'
			};
			this.Unfold_data.tea_data(params, 'POST', url, res => {
				if (res.data.code == 1) {
					uni.hideLoading()
					uni.stopPullDownRefresh()
					this.shopList = res.data.data;
				} else {
					//显示错误信息
					this.Unfold_data.showWindow(res.data.msg);
				}
			});
		},
		getStarData() {
			var url = '/api/goods/goods/lists';
			let params = {
				token:this.token,
				shop_id:this.shop_id
			};
			this.Unfold_data.yh_data(params, 'POST', url, res => {
				if (res.data.code == 1) {
					uni.stopPullDownRefresh()
					this.goodsList = res.data.data;
				} else {
					this.Unfold_data.showWindow(res.data.msg);
				}
			});
		},
		getInfo(){
			var url = '/api/article/article/article';
			let params = {
				shop_id:this.shop_id
			};
			this.Unfold_data.yh_data(params, 'POST', url, res => {
				if (res.data.code == 1) {
					uni.stopPullDownRefresh()
					this.infolist = res.data.data;
				} else {
					this.Unfold_data.showWindow(res.data.msg);
				}
			});
		},
		bindTab(index){
			this.currentIndex=index
			if(index==0){
				this.getShopData()
			}else if(index==1){
				uni.showLoading({
					title:'加载中'
				})
				let url="/api/shop/service/lists";
				var address = uni.getStorageSync('address')
				let params = {
					'longitude':address.longitude,
					'latitude':address.latitude,
					token:this.token,
					shop_id:this.shop_id,
					name:'服务站'
				};
				this.Unfold_data.tea_data(params, 'POST', url, res => {
					if (res.data.code == 1) {
						uni.hideLoading()
						this.shopList = res.data.data;
					} else {
						//显示错误信息
						this.Unfold_data.showWindow(res.data.msg);
					}
				});
			}
		},
		getTabData() {
			let url = '/api/increment/Increment/Bottom_navigation_icon';
			let params = {
				token: this.token,
				shop_id: this.shop_id
			};
			this.Unfold_data.tea_data(params, 'POST', url, res => {
				if (res.data.code == 1) {
					this.tabListParent = res.data.data;
				} else {
					//显示错误信息
					this.Unfold_data.showWindow(res.data.msg);
				}
			});
		},
		bindTip(){
			uni.navigateTo({
				url:'../f_code/f_code'
			})
		},
		toTransfer(){
			uni.navigateTo({
				url:'../transfer/transfer?token='+this.token
			})
		},
		bindGoodsShop(id){
			uni.navigateTo({
				url:'../goods_detail/goods_detail?id='+id+'&shop_id='+this.shop_id+'&token='+this.token
			})
		},
		bindInfo(id){
			uni.navigateTo({
				url:'../info_detail/info_detail?id='+id
			})
		},
		bindInfos(id,title){
			// if(id==10){
			// 	var url = '/api/article/article/navigation_details';
			// 	let params = {
			// 		id:id
			// 	};
			// 	this.Unfold_data.yh_data(params, 'POST', url, res => {
			// 		if (res.data.code == 1) {

			// 			let mobile = res.data.data.contact;
			// 			const ress = uni.getSystemInfoSync(mobile);
			// 			if (ress.platform == 'ios') {
			// 				uni.makePhoneCall({
			// 					phoneNumber: mobile,
			// 					success() {
			// 						console.log('拨打成功了');
			// 					},
			// 					fail() {
			// 						console.log('拨打失败了');
			// 					}
			// 				})
			// 			} else {
			// 				uni.showActionSheet({
			// 					itemList: [mobile, '呼叫'],
			// 					success: function(res) {
			// 						if (ress.tapIndex == 1) {
			// 							uni.makePhoneCall({
			// 								phoneNumber: mobile,
			// 								success() {
			// 									console.log('拨打成功了');
			// 								},
			// 								fail() {
			// 									console.log('拨打失败了');
			// 								}
			// 							})
			// 						}
			// 					}
			// 				})
			// 			}
			// 		} else {
			// 			this.Unfold_data.showWindow(res.data.msg);
			// 		}
			// 	});
			// 	return
			// }
			if(title=='数字门店'){
				uni.navigateTo({
					url:'../szmd/detail?shop_id='+this.shop_id+'&token='+this.token
				})
				return
			}
			if(title=='网购'){
				uni.navigateTo({
					url:'../taobo/taobo'
				})
				return
			}
			uni.navigateTo({
				url:'../sydetail/sydetail?id='+id+'&name='+title
			})
		},
		bindBt(){
			uni.navigateTo({
				url:'../barShop/barShop?shop_id='+this.shop_id+'&token='+this.token
			})
		},
		changeTab(index,url) {
			console.log(88888,url)
			this.curTab = index;
			sui.navigateTo({
				url:url,
			})
		},
		toKefu(){
			sui.navigateTo({
				url:'/pages/user_chat/user_chat'
			})
		},
		bindGoodsList(item){
			uni.navigateTo({
				url:'../fwz_List/fwz_List?name='+item.name+'&token='+this.token+'&ids='+item.id
			})
		},
		bindGoodsShopss(item){
			uni.navigateTo({
				url:'../fwz_shop/fwz_shop?token='+this.token+'&shop_id='+item.id+'&name='+item.name
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	width: 750upx;
	padding-bottom: calc(var(--window-bottom) + 55px);
	.head-box {
		width: 750upx;
		.inp-box {
			width: 700upx;
			margin: 0 auto;
			padding-top: 60upx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			.loca {
				font-size: 25upx;
				color: #ffffff;
				width: 96upx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.inp {
				width: 528upx;
				height: 58upx;
				background: #ffffff;
				border-radius: 29upx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				margin-left: 18upx;
				.search {
					width: 29upx;
					height: 29upx;
					margin-left: 10upx;
				}
				.chaxun {
					margin-left: 5upx;
				}
			}
			.kefu {
				width: 43upx;
				height: 41upx;
				margin-left: 30upx;
				image {
					width: 43upx;
					height: 41upx;
				}
			}
		}
		.fun_box {
			width: 660upx;
			margin: 60upx auto 0;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			.fun_item {
				width: 25%;
				text-align: center;
				image {
					width: 72upx;
					height: 72upx;
				}
				.title {
					font-size: 32upx;
					font-weight: bold;
					color: #ffffff;
					display: block;
				}
			}
		}
	}
	.menu_box {
		width: 710upx;
		margin: 270upx auto 0;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
		.menu_item {
			width: 20%;
			text-align: center;
			margin-bottom: 40upx;
			.menu_img {
				width: 70upx;
				height: 70upx;
			}
			.menu_txt {
				font-size: 28upx;
				color: #010101;
				display: block;
			}
		}
	}
	.banner {
		margin-top: 50upx;
		width: 710upx;
		margin: 0 auto;
		.swipers {
			height: 260upx;
			image {
				width: 710upx;
				height: 260upx;
			}
		}
	}
	.star_box {
		width: 100%;
		margin-top: 40upx;

		.star_head {
			width: 730upx;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.star_left {
				font-size: 33upx;
				font-weight: bold;
				color: #212121;
			}
			.star_right {
				font-size: 30upx;
				color: #d44040;
			}
		}
		.star_list {
			width: 730upx;
			margin: 0 auto;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: wrap;
			.star_item {
				width: 232upx;
				margin-right: 10upx;
				margin-top: 20upx;
				.star_img {
					width: 225upx;
					height: 225upx;
				}
				.title {
					width: 222upx;
					margin-top: 5upx;
					font-size: 21upx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.price {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					.yh {
						width: 70upx;
						height: 28upx;
						text-align: center;
						line-height: 26upx;
						font-size: 21upx;
						font-weight: bold;
						border: 1px solid #c8241b;
						color: #c8241b;
					}
					.jg {
						font-size: 24upx;
						font-weight: bold;
						color: #c8241b;
						margin-left: 10upx;
					}
					.yuan {
						font-size: 21upx;
						font-weight: bold;
						color: #c8241b;
					}
				}
			}
		}
	}
	.shift_box {
		margin-top: 50upx;

		.shift_head {
			width: 700upx;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.shift_left {
				font-size: 33upx;
				font-weight: bold;
				color: #212121;
			}
			.shift_right {
				font-size: 30upx;
				color: #959494;
			}
		}
		.shift_dh {
			width: 750upx;
			margin-top: 20upx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			.dh_left {
				width: 50%;
				height: 110upx;
				text-align: center;
				border-bottom: 1px solid #c7c6c6;
			}
			.dh_hover {
				width: 50%;
				height: 110upx;
				text-align: center;
				border-bottom: 4px solid #c8241b;
			}
		}
		.shift_list {
			height:400upx;
			scrollbar-width: none;
			overflow: hidden;
			overflow-y: auto;
			.shop_item {
				width: 720upx;
				height: 256upx;
				display: flex;
				justify-content: flex-start;
				margin: 20upx auto;
				padding: 30upx 10upx;
				border-bottom: 1upx solid #e4e2e2;
				.shop_left {
					.imgs {
						width: 190upx;
						height: 190upx;
						border-radius: 12upx;
					}
				}
				.shop_right {
					width: 490upx;
					position: relative;
					margin-left: 13upx;
					.shop_title {
						width: 490upx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						.title_left{
							font-size: 30upx;
							font-weight: bold;
							color: #060606;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							width: 240upx;
						}
						.title_right{
							font-size: 22upx;
							color: #666;
						}
					}
					.shop_sub {
						margin-top: 10upx;
						font-size: 25upx;
						font-weight: bold;
						color: #a09f9f;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						width: 320upx;
					}
					.tuijie{
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-top: 10upx;
					}
					.shop_del {
						width: 490upx;
						position: absolute;
						top: 160upx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						.del_left{
						    .shop_num{
								min-width: 200upx;
								height: 47upx;
								background: #FCA214;
								text-align: center;
								line-height: 47upx;
								font-size: 26upx;
								color:#fc0123;
								border-radius: 10upx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								padding: 0 10upx;
							}	
						}
						.shop_jl{
							width: 200upx;
							height: 47upx;
							background: #FCA214;
							text-align: center;
							line-height: 47upx;
							font-size: 26upx;
							color:#fc0123;
							border-radius: 10upx;
							font-family: Source Han Sans CN;
							font-weight: 400;
						}
					}
				}
			}
		}
	}
	.info_box {
		margin-top: 30upx;
		margin-bottom: 140upx;
		.info_head {
			margin-left: 30upx;
			font-size: 33upx;
			font-weight: bold;
			color: #212121;
			margin-bottom: 20upx;
		}
		.info_item {
			width: 720upx;
			height: 210upx;
			border-radius: 15upx;
			background-color: #ffffff;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin: 0 auto 20upx;
			padding: 0 20upx;
			.info_left {
				.left_title {
					width: 450upx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-size: 28upx;
					font-weight: bold;
					color: #000000;
				}
				.left_sub {
					margin-top: 30upx;
					font-size: 21upx;
					font-weight: bold;
					color: #8d8d8d;
				}
			}
			.info_right {
				margin-left: 15upx;
				image {
					width: 215upx;
					height: 132upx;
					border-radius: 10upx;
				}
			}
		}
	}
	.bottom-tab {
		position: fixed;
		z-index: 3000;
		background-color: #f7f6f6;
		bottom: 0%;
		left: 0%;
		width: 100%;
		height: 120upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.bottom-tab-item-center {
			width: 24%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin-top: -40upx;
			.first-img {
				width: 100upx;
				height: 100upx;
				margin-top: -0.8rem;

				border-radius: 50%;
			}
			.text-position {
				margin-top: 0rem;
				font-size: 0.6rem;
				color: #757575;
			}
			.text-on {
				color: #b49828;
			}
		}
		.bottom-tab-item-sider {
			width: 15%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.first-img {
				width: 46upx;
				height: 46upx;
			}
			.text-position {
				margin-top: 12upx;
				font-size: 0.6rem;
				color: #757575;
			}
			.text-on {
				font-weight: bold;
				color: #c8241b;
			}
		}
	}
}
</style>
